
<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html;charset=utf-8' http-equiv='Content-Type' />
    <title>Simple Atoms Model</title>
    <script src='modernizr.js' type='text/javascript'></script>
    <script type='text/javascript'>
      if (!Modernizr.svg) { window.location = 'http://lab.concord.org/browser-upgrade.html'; }
    </script>
    <link href='examples.css' rel='stylesheet' type='text/css' />
    <script src='d3.v2.js' type='text/javascript'></script>
    <script src='jquery.min.js' type='text/javascript'></script>

    <script src='science.v1.js' type='text/javascript'></script>
    <script src='hdw8ayt.js' type='text/javascript'></script>
    <script type='text/javascript'>
      try{Typekit.load();}catch(e){}
    </script>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300italic,400,300,700&amp;subset=latin,greek,latin-ext' rel='stylesheet' type='text/css' />
    <link href='application.css' rel='stylesheet' type='text/css' />
  </head>
  <body>
    <div id='viz'>
      <div class='top'>
        <div class='square'>
          <img src='aspect-ratio-1x1.png' />
          <div id='molecule-container'></div>
        </div>
        <div class='therm'>
          <div id='thermometer'></div>
          <div id='therm_text'></div>
        </div>
      </div>
      <div class='bottom'>
        <div class='component_group'>
          <div class='slider_container'>
            Intermolecular Attraction
            <div class='slider_content'>
              <div id='attraction_slider'></div>
            </div>
            <div class='left_half'>
              weaker
            </div>
            <div class='right_half'>
              stronger
            </div>
            <div class='below'>
              Attractive Force
            </div>
          </div>
        </div>
        <div class='component_group'>
          <div class='slider_container'>
            Force Interactions
            <div class='slider_content'>
              Coulomb
              <input id='coulomb-forces-checkbox' type='checkbox' />
            </div>
            <div class='below'>
              <input checked='checked' id='lennard-jones-forces-checkbox' type='checkbox' />
            </div>
          </div>
        </div>
        <div class='component_group'>
          <div class='slider_container'>
            Change Temperature
            <div class='content'>
              <div style='width: 10em; height: 2em; display: inline-block; margin: 0.5em'>
                <button class='left_edge' id='cool_button' type='button' value='colder'>colder</button>
                <button class='right_edge' id='heat_button' type='button' value='hotter'>hotter</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src='lab.js' type='text/javascript'></script>
    <script src='application.js' type='text/javascript'></script>
    <script type='text/javascript'>
      //try { document.domain = "concord.org" } catch(e) { }
    </script>
  </body>
</html>
